<template>
    <div id="passport">
        <div class="row">
            <div class="col-md-12">
                <condition @getPassportCondition="getCondition"></condition>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="competes" size="small" border style="width: 100%">
                    <el-table-column sortable fixed align="center" prop="CompeteId" label="编号" width="80"></el-table-column>
                    <el-table-column sortable fixed align="center" prop="State" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.State == -1" type="info">已删除</el-tag>
                            <el-tag v-if="scope.row.State == 0">未激活</el-tag>
                            <el-tag v-if="scope.row.State == 1" type="success">已激活</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed prop="PassportNo" label="通行证" width="150"></el-table-column>
                    <el-table-column align="center" fixed label="姓名" width="120">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Passport.User"></user-detail>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="电子邮件" width="150">
                        <template slot-scope="scope">
                            <a :href="'mailto:' + scope.row.Passport.User.Email">{{ scope.row.Passport.User.Email }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="比赛项目" width="130">
                        <template slot-scope="scope">
                            <span>{{ eventFormat(scope.row.CompeteEvent) }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" label="比赛组别" width="100">
                        <template slot-scope="scope">
                            <span>{{ words.groups[scope.row.CompeteGroup] }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="MusicName" label="比赛曲目" width="120"></el-table-column>
                    <el-table-column align="center" prop="Composer" label="作曲" width="100"></el-table-column>
                    <el-table-column align="center" prop="Arranger" label="编曲" width="100"></el-table-column>
                    <el-table-column align="center" prop="Accompany" label="伴奏" width="100"></el-table-column>
                    <el-table-column align="center" label="创建时间" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="100" v-if="authorize(['ROOT'])">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.State != -1" @click="remove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    
    </div>
</template>

<script>

import Condition from './condition.vue';
import UserDetail from 'views/user/user_detail.vue';
import {DeepClone, ShowSuccess, TimeFormat} from 'web/utils';

export default {
    components: {
        Condition,
        UserDetail
    },
    filters: {
        time: TimeFormat
    },
    data() {
        return {
            competes: [],
            pageCount: 0,
            pageSize: 10,
            condition: { },
            words: {
                events: {},
                groups: {}
            }
        }
    },
    mounted() {

        // 加载词语
        this.$DataService.GetWordDictByCode('COMPETE_GROUP')
            .then(ret => {
                this.words.groups = ret;
            });
        this.$DataService.GetWordDictByCode('SOLO_COMPETE_EVENT')
            .then(ret => {
                this.words.events = ret;
            });
    },
    methods: {

        eventFormat: function(val) {
            if (val == 'TREMOLO_SOLO_OPEN') val = 'TREMOLO_SOLO';
            if (val == 'CHROMATIC_SOLO_OPEN') val = 'CHROMATIC_SOLO';
            return this.words.events[val];
        },

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$CompeteService.QueryCompetes(this.condition, val, this.pageSize)
                .then(ret => {
                    this.competes = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            var _condition = DeepClone(condition);
            if (_condition.Events) {
                // 处理特殊的公开组比赛
                if (_condition.Events.findIndex(v => v == 'TREMOLO_SOLO') > -1) {
                    _condition.Events.push('TREMOLO_SOLO_OPEN');
                }
                if (_condition.Events.findIndex(v => v == 'CHROMATIC_SOLO') > -1) {
                    _condition.Events.push('CHROMATIC_SOLO_OPEN');
                }
            }
            Promise.all([
                this.$CompeteService.QueryCompetesCount(_condition),
                this.$CompeteService.QueryCompetes(_condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.competes = ret[1];
            });
        },   
        
        // 删除比赛
        remove(compete) {
            this.$confirm(`确定要删除比赛 ${compete.Name} 吗？`, '删除比赛', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'}).then(() => {
                this.$PassportService.Remove(compete.CompeteId)
                    .then(ret => {
                        if(ret) {
                            compete.State = -1; 
                            ShowSuccess(`比赛 ${compete.Name} 已经删除。`,'删除比赛');                        
                        }
                    });
            });
        },

        formatLocation(country, province) {
            return LocationStringFormat(country, province);
        }
    }
}
</script>

<style>

</style>
